$hackerRed = #f03838
$hackerGray = #9e9e9e
$articleTitleColor = #212121
$articleTextColor = #424242
$articleCodeColor = #c7254e

$articleTitleDarkColor = #f6f2f5
$articleTextDarkColor = #fff
$articleCodeDarkColor = #f45542

article
  position relative
  padding 8rem 0

  a
    color $hackerRed

  &:not(:first-child):before
    content ''
    width 150px
    height 1px
    background-color: #e0e0e0
    position absolute
    top 0
    left 50%
    margin-left -75px

  blockquote
    margin 6rem 2rem
    padding-left 15px
    line-height 2rem
    border-left 4px solid $hackerRed

  .article-title
    position relative
    color $articleTitleColor
    font-size 2.4rem
    line-height 1.3
    text-align center
    margin 0
    padding 0 2rem

    a
      display block
      color $articleTitleColor

      span
        padding-bottom 3px
        -webkit-transition 0.15s
        transition 0.15s
        box-shadow inset 0 -2px 0 rgba(240, 56, 56, 0)

      &:hover
        color $articleTitleColor

        span
          box-shadow inset 0 -2px 0 rgba(240, 56, 56, 0.4)

  .article-top-meta
    position relative
    color $hackerGray
    font-size 1.3rem
    text-align center
    margin 1rem 0

    span
      margin 0 0.5rem

    a
      color $hackerGray
      &:hover
        color $hackerRed

      time
        font-style italic

  .article-excerpt, .article-content, .featured-media
    margin 4rem 0
    font-size 1.6rem
    color $articleTextColor

    .excerpt-btn
      margin 4rem 0
      font-size 1.4rem

    img
      display block
      max-width: 100%
      height auto
      margin 1rem auto

  .article-footer
    .pull-left
      float left
    .pull-right
      float right

    &:after
      content " "
      display block
      clear both

    .article-meta > span:not(:last-child)
      margin-right 3rem

    .article-meta > span
      display inline-block

    .article-meta > span > span
      line-height 1
      vertical-align middle

    .article-meta
      font-size 1.3rem
      color $hackerGray

      a
        color $hackerGray
        &:hover
          color $hackerRed

      i
        vertical-align middle
        color $hackerGray
        margin-right 0.5rem

    .post-tags
      a
        &:before
          content "#"

        &:not(:last-of-type):after
          content ","
          padding-right 5px





  code
    padding 2px 4px
    margin-left 2px
    margin-right 2px
    color $articleCodeColor
    white-space normal
    border-radius 0

  p
    margin 2rem 0
    line-height 1.8


  .video-container
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;

    iframe
      position: absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;

  table
    max-width 100%
    width 100%

    caption
      padding 5px
      color #333
      background-color #e5e5e5

    th, td
      text-align left
      padding 0.6em
      vertical-align top

    th
      vertical-align bottom
      border-bottom 1px solid #e5e5e5

    tbody + tbody
      border-top 2px solid #e5e5e5

    .table
      background-color #fff


    .table-bordered
      border 1px solid #e5e5e5

    .table-striped tbody tr:nth-of-type(odd)
      background-color:#f2f2f2

    pre
      overflow-x auto
      overflow-y hidden

@media (prefers-color-scheme dark)
  article
    color $articleTitleDarkColor

    .article-title
      color $articleTitleDarkColor

      a
        color $articleTitleDarkColor

        &:hover
          color $articleTitleDarkColor

    .article-excerpt, .article-content, .featured-media
      color $articleTextDarkColor

    code
      color $articleCodeDarkColor
